<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
    <meta name="Keywords" content=""/>
    <meta name="description" content=""/>
    <link type="image/x-icon" href="" rel="shortcut icon">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/cropper.css">
    <link rel="stylesheet" href="css/book_list.css">
    <link rel="stylesheet" href="css/comic_cropper_modal.css">
    <style>
        .dbtn {display: block;margin: 80px auto 0;border-radius: 8px;height:120px;width: 240px;background-color: #ff6a48;color: #fff;text-align: center;line-height: 120px;font-size: 28px;}
    </style>
</head>
<body>
<span id="demoBtn" class="dbtn">点我</span>
<span id="demoBtn2" class="dbtn">点我</span>
<span id="demoBtn3" class="dbtn">点我</span>
<img id="demoPic" src="" alt="">
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/cropper.js"></script>
<script type="text/javascript" src="js/comic_cropper.js"></script>
<script type="text/javascript" src="js/comic_cropper_modal.js"></script>
<!--签名相关start-->
<script type="text/javascript" src="lib/crypto/crypto/crypto.js"></script>
<script type="text/javascript" src="lib/crypto/hmac/hmac.js"></script>
<script type="text/javascript" src="lib/crypto/sha1/sha1.js"></script>
<script type="text/javascript" src="lib/base64.js"></script>
<!--cropper裁剪功能封装-->
<script src="js/comic_cropper.js"></script>
<script>

    //用于测试
    var testData1 = [{
        "clipname": "比例1：3",
        "clipsize": [750, 1000],
        "osspath": "/file/cover/17/199/999/999_2_1.jpg",
        "previewHost": "",
        "suffix": ""
    }, {
        "clipname": "比例1：4",
        "clipsize": [200, 800],
        "osspath": "/file/cover/17/199/999/999_2_1.jpg",
        "previewHost": "",
        "suffix": ""
    }, {
        "clipname": "比例1：1",
        "clipsize": [100, 100],
        "osspath": "/file/cover/17/189/999/999_3_4.jpg",
        "previewHost": "",
        "suffix": ""
    }, {
        "clipname": "比例2：1",
        "clipsize": [200, 100],
        "osspath": "/file/cover/17/189/999/999_3_4.jpg",
        "previewHost": "",
        "suffix": ""
    }, {
        "clipname": "比例3：1",
        "clipsize": [300, 100],
        "osspath": "/file/cover/17/189/999/999_3_4.jpg",
        "previewHost": "",
        "suffix": ""
    }, {
        "clipname": "比例4：3",
        "clipsize": [800, 600],
        "osspath": "img/test5.jpg",
        "previewHost": "",
        "suffix": ""
    }];
    var testData2 = [{
        "clipname": "比例1：1",
        "clipsize": [100, 50],
        "osspath": "img/test2.jpg",
        "previewHost": "",
        "suffix": ""
    },{
        "clipname": "比例1：1",
        "clipsize": [100, 200],
        "osspath": "img/test4.jpg",
        "previewHost": "",
        "suffix": ""
    }];
    var testData3 = [{
        "clipname": "比例1：1",
        "clipsize": [50, 50],
        "osspath": "img/test3.jpg",
        "previewHost": "",
        "suffix": ""
    }];

    //裁剪全局常量
    var CLIP_CONFIG={
        title:"封面图裁剪",
        preview:"img/blank.jpg",//默认裁剪预览框图片
        blank:"img/transparent.png",//默认裁剪透明图片
        accessid: 'LTAIJOIQKZbOEPOf', //上传图片用
        accesskey: 'CZuVJ8T5hM0BswwMy0aFSb0tkdHqFL',//上传图片用CZuVJ8T5hM0BswwMy0aFSb0tkdHqFL
        host: 'http://zymkimage.oss-cn-hangzhou.aliyuncs.com',//上传图片路径
    };

    $(function(){
        var clipModal=window["clipModal"];
        clipModal.init(CLIP_CONFIG,{
            special: true, //针对单张图片弹出不一样的界面
            submitCallback:function(status,imgData,paramData){
                
            }
        });
//裁剪功能逻辑
        var btn=$("#demoBtn");
        var btn2=$("#demoBtn2");
        var btn3=$("#demoBtn3");
        var pic=$("#demoPic");
        btn.on("click",function(){
            clipModal.use(testData1);
        });
        btn2.on("click",function(){
            clipModal.use(testData2);
        });
        btn3.on("click",function(){
            clipModal.use(testData3);
        });

// 异步操作遮罩
    function cover(show) {
        !cover["_layer"] && (cover["_layer"] = $("#cover"));
        cover["_layer"][!!show ? "show" : "hide"]();
    }

// 很简易的模版处理(仅能处理对象的一级属性值，不能在模版中使用循环)
        //如果模版比较复杂 建议试用其他模版插件渲染
        function simpleTpl(tplId, data) {
            var tplStr = $("#" + tplId).html();
            var fn = function (str, obj) {
                return str.replace(/\<script/g, "&lt;script").replace(/\{\{([^\^\$]*?)\}\}/g, function (a, $1) {
                    return obj[$1] || "";
                }).replace(/\{\{\#\}\}/g, function (a, $1) {
                    return obj.toString();
                }).replace(/\{\{\^(.*?)\}\}([\s\S]*?)\{\{\$(.*?)\}\}/g,function(a,$1,$2,$3){
                    return ($1===$3&&!!obj[$1])?$2:""
                });
            };
            var strings="";
            if($.isArray(data)){
                for(var i=0;i<data.length;i++){
                    strings+=fn(tplStr,data[i]);
                }
            }
            else {
                strings=fn(tplStr,data);
            }
            return strings;
        }
    });
</script>
</body>
</html>